<template>
  <div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <Hearder :todos='todos' :addNewTodo="addNewTodo"/>
     <List :todos='todos' :delectTodo="delectTodo" :checkTodo="checkTodo"/>
     <Footer :todos='todos' :deleteAllDone="deleteAllDone" :checkAll="checkAll" v-show="todos.length"/>
    </div>
  </div>
</div>
</template>

<script>
import Hearder from './components/Hearder'
import List from './components/List'
import Footer from './components/Footer'
  export default {
    name:'App',
    data() {
      return {
        todos:JSON.parse(localStorage.getItem('list')) || []
      }
    },
    components:{
        Hearder,
        List,
        Footer
    },
    methods:{
      // 修改数据要在数据相对应的位置
      addNewTodo(newObj){
        const v = this.todos.find(todo => newObj.title === todo.title)
        if(v){
          alert('不能输入相同的事件,请重新输入')
          return false
        }else{
          this.todos.unshift(newObj)
          return true
        }
        
      },
      delectTodo(id){
         const newtodos =  this.todos.filter(todo => id !== todo.id);
         this.todos = newtodos;
      },
      checkTodo(id,done){
          this.todos.forEach(todo=>{
            if(id===todo.id){
              todo.done = done
            }
          })
      },
      deleteAllDone(){
        const newTodos = this.todos.filter(todo=>todo.done === false);
        this.todos = newTodos;
      },
      checkAll(done){
          this.todos.forEach(todo => todo.done = done)
      }
    },
    // 监视属性是为了深度监视done的变化
    watch:{
       todos:{
         deep:true,
         handler(value){
           localStorage.setItem('list',JSON.stringify(value))
         }
       }
    }
  }
</script>

<style>
  /*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
li:hover {
  background: rgb(181, 231, 168);
}

li:hover button{
  display: block;
}





</style>